import React, { useState } from 'react';
import { connect } from 'react-redux';
import { NavBar, TabBar } from 'antd-mobile';
import { 
  AppOutline, 
  SetOutline, 
  UserOutline,
  TeamOutline,
  CalendarOutline,
  UserCircleOutline
} from 'antd-mobile-icons';
import { useNavigate, useLocation } from 'react-router-dom';
import AppRouter from './router';
import styles from './App.module.less';

const App = ({ isLoggedIn }) => {
  const [activeTab, setActiveTab] = useState('home');
  const navigate = useNavigate();
  const location = useLocation();

  // 根据当前路径设置activeTab
  React.useEffect(() => {
    const path = location.pathname;
    if (path === '/') {
      setActiveTab('home');
    } else if (path === '/about') {
      setActiveTab('about');
    } else if (path === '/profile') {
      setActiveTab('profile');
    } else if (path === '/teams') {
      setActiveTab('teams');
    } else if (path === '/matches') {
      setActiveTab('matches');
    } else if (path === '/players') {
      setActiveTab('players');
    }
  }, [location.pathname]);

  const handleTabChange = (key) => {
    setActiveTab(key);
    switch (key) {
      case 'home':
        navigate('/');
        break;
      case 'about':
        navigate('/about');
        break;
      case 'profile':
        navigate('/profile');
        break;
      case 'teams':
        navigate('/teams');
        break;
      case 'matches':
        navigate('/matches');
        break;
      case 'players':
        navigate('/players');
        break;
      default:
        break;
    }
  };

  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: 'teams',
      title: '球队',
      icon: <TeamOutline />,
    },
    {
      key: 'matches',
      title: '比赛',
      icon: <CalendarOutline />,
    },
    {
      key: 'players',
      title: '球员',
      icon: <UserCircleOutline />,
    },
    {
      key: 'about',
      title: '关于',
      icon: <SetOutline />,
    },
    {
      key: 'profile',
      title: '我的',
      icon: <UserOutline />,
    },
  ];

  return (
    <div className={styles.app}>
      <NavBar className={styles.navbar}>
        React H5 App
      </NavBar>
      
      <div className={styles.content}>
        <AppRouter />
      </div>

      <TabBar
        activeKey={activeTab}
        onChange={handleTabChange}
        className={styles.tabbar}
      >
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
};

const mapStateToProps = (state) => ({
  isLoggedIn: state.user.isLoggedIn,
});

export default connect(mapStateToProps)(App);
